@charset "UTF-8";
@import "../common/scss/mobile";
@import "../common/scss/mixins";
@import "../common/scss/sprites";

body{
	height:100%;
}


.m-slider{
   &>div{
      height: 11rem;
      overflow: hidden;
      img{
       width:100%;
       height:100%;
       display:block;
      }
    }
}
.swiper-container{
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  z-index: 1;
  .swiper-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    @each $prefix in '-webkit-','-moz-', '-o-','-ms-','' {
      #{$prefix}transition-property: #{$prefix}transform;
    }
    @each $prefix in '-webkit-','-moz-', '' {
      #{$prefix}box-sizing: content-box;
    }
    @include flexbox;
  }
  .swiper-slide{
    -webkit-flex-shrink: 0;
    -ms-flex: 0 0 auto;
    flex-shrink: 0;
    position: relative;
  }
}
.slider-swiper {
  .swiper-wrapper {
      align-items: flex-start;
      .swiper-slide {
        width: 100%;
        height: 11rem;
        overflow: hidden;
        img {
          min-width: 100%;
          height: 100%;
          border: none;
        }
      }
  }
  .swiper-pagination {
    width: 100%;
    position: absolute;
    bottom: 0.7rem;
    left: 0;
    text-align: center;
    @each $prefix in '-webkit-','-moz-', '-o-','-ms-','' {
      #{$prefix}transform:translate3d(0,0,0);
      transition: .3s;
    }
    z-index: 10;
    &.swiper-pagination-hidden {
      opacity: 0
    }
    .swiper-pagination-bullet {
      width: 0.65rem;
      height: 0.65rem;
      display: inline-block;
      border-radius: 100%;
      opacity: .7;
      margin: 0 0.25rem;
	  background-color:#353535;
    }
    .swiper-pagination-bullet-active {
		 background-color:$bg02;
		 opacity: .9;
    }
  }
}
.nav-swiper{
  line-height: 4rem;
  .swiper-wrapper{
	padding-bottom:0.1rem;
  }
  .swiper-slide {
    width: 100%;
    font-size:$fs15;
    color:$color01;
    height: 4.2rem;
    line-height:3.9rem;
    text-align: center;
	border-bottom:1px solid $border02;
    &.active-nav{
		color:$color06;
	}
  }
  .swiper-scrollbar-drag {
    transform: translate3d(4.13rem, 0px, 0px);
    @each $prefix in '-webkit-','-moz-', '-o-','' {
      #{$prefix}transition: all 0.3s linear;
    }
    height: 0.3rem;
    width: 2.5rem;
    background: $bg03;
    position: absolute;
    bottom: 0;
    z-index: 50;
    left:0;
	  visibility: hidden;
  }
}
.goods-swiper {
  .swiper-slide {
  min-height:10rem;
   @include scrolling;
    padding-top: 0.3rem;
    & > div {
    	&:not(:first-child){
    		border-top:1px solid $border01;
    	}    	
      -webkit-tap-highlight-color: red;
      position: relative;
      padding:0 1.4rem;
      text-align: left;
      font-size: $fs11;
      .bdr-bom{
         @extend .flex-row;
         padding: 0.8rem 0;
        position: relative;
        .img {
          width: 9.55rem;
          height: 8.7rem;
          margin-right: 0.85rem;
          vertical-align: middle;
          text-align: center;
          border: solid 1px transparent;
          @include radius(".4rem");
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          overflow: hidden;
		  position:relative;
          img {
            width: 100%;
            height: 100%;
            display: block;
            border-width: 0;
          }
		  .discount{
		      position:absolute;
			  right:0.8rem;
			  top:0;
			  background-color:$bg05;
			border-bottom-right-radius: 0.4rem;
			border-bottom-left-radius:  0.4rem;
			  span{
			  padding:0.2rem 0.8rem;
				display:inline-block;
				color:$color10;
				font-size:$fs09;
			  }
		  }
        }
        .item-info{
          @extend .flex-item;
          overflow: hidden;
        }
        .g-title {
          color: $color03;
          font-size:$fs15;
          @extend .single-line-clamp;
        }
        .g-intro{
          line-height: 1.1rem;
          font-size:$fs10;
          color:$color01;
          height: 2.1rem;
          @include ellipsisLn(2);
          margin: 0.4rem 0 0.4rem;
        }
        .g-tag{
          padding-bottom: 0.2rem;
          height: 1.65rem;
          span{
            color:$color04;
            font-size:$fs09;
            display: inline-block;
            border: 1px solid rgba(33,172,57,.6);
            @include radius(".4rem");
            line-height: 1.4rem;
            padding: 0 0.2rem;
            margin-right: 0.1rem;
          }

        }
        .g-price{
          font-size:$fs10;
		  height:2.8rem;
          span,del{    
			display: inline-block;
			    vertical-align: baseline;
		  }
          span{
			color:$color01;
			&.forsale{
			   background-color:$bg05;
			   @include radius(".2rem");
			   color:$color10;
			   padding:.2rem .4rem;
			   float: right;
			}
		  }
		  .s-price,sub{
            color: $color05;
            font-style: italic;
		  }
          .s-price{
            font-size:$fs18;
            sub{
              font-size:$fs15;
              margin-right: 0.1rem;
			 
            }
          }

          del{color:$color01;margin:0 1rem;}
		  
        }
		.vblock{
			&:before {
			  content: "";
			  display: inline-block;
			      vertical-align: middle;
			  height: 100%;
			}		
		}
		.sellout-icon{
			position:absolute;
			right:-0.4rem;
			bottom:1.4rem;
		}
		.icon-selled{
			@include mix-selled();
		}
      }
      &:active {
        background-color: $bg02;
      }
	  &.sellout{
		  .g-title,.g-intro{
			color:#cacaca;
		  }
		  .g-price,.g-tag{
			  span,sub,.s-price,del{
				color:#cacaca;
			  }			
		  }
		  .g-tag span{
		     border: 1px solid #cacaca;
		  }
	     
	  }
    }

  }
}

@import "../common/scss/autoHeight";
@import "../common/scss/utilities";
@import "../common/scss/layer";
@import "../common/scss/calendar";

